<template>
    <section class="root">
        <div class="top">
            <span>我的</span>
        </div>
        <div class="toptubiao1">
            <van-icon name="hot-o" color="#fff" size="22"/>
        </div>
        <div class="toptubiao2">
            <van-icon name="chat-o" color="#fff" size="22"/>
        </div>
        <div class="piaofu">
            <div class="xinxi" >
                <div class="touxiang"><img src="../../../assets/星球.png"/></div>
                <p @click="login">注册/登录</p>
            </div>
            <p class="jifen">登录送积分</p>
        </div>
        <div class="posimming2">
            <li>
                <span></span>
                <span class="ziti">收藏商品</span>
            </li>
            <li>
                <span></span>
                <span class="ziti">消费积分</span>
            </li>
            <li>
                <span></span>
                <span class="ziti">优惠券</span>
            </li>
        </div>
        <div class="content">
            <div class="content1">
                <div class="content1_top" style="padding-right: 0">
                    <p class="content1_top_p1">我的订单</p>
                    <p class="content1_top_p2">全部订单<span><van-icon name="arrow" color="#909399"
                                                                   style="line-height: 17px"/></span></p>
                </div>
                <div class="content1_midddle"></div>
                <div class="content1_bottom">
                    <li class="content1_bottom_li">
                        <span><van-icon name="balance-pay" size="30"/></span>
                        <p>待付款</p>
                    </li>
                    <li class="content1_bottom_li">
                        <span><van-icon name="idcard" size="30"/></span>
                        <p>代发货</p>
                    </li>
                    <li class="content1_bottom_li">
                        <span><van-icon name="logistics" size="30"/></span>
                        <p>待收货</p>
                    </li>
                    <li class="content1_bottom_li">
                        <span><van-icon name="edit" size="30"/></span>
                        <p>评价</p>
                    </li>
                    <li class="content1_bottom_li">
                        <span><van-icon name="notes-o" size="30"/></span>
                        <p>退款/退货</p>
                    </li>

                </div>
            </div>
            <div class="content1">
                <div class="content1_top">
                    <p class="content1_top_p1">其他服务</p>
                </div>
                <div class="content1_midddle"></div>
                <div class="content1_bottom1">
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_03.jpg" height="41" width="42"/>
                        <p>我的收藏</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_05.jpg" height="41" width="41"/>
                        <p>我的积分</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_07.jpg" height="41" width="41"/>
                        <p>我的足迹</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_09.jpg" height="41" width="42"/>
                        <p>优惠券</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_15.jpg" height="41" width="42"/>
                        <p>分销管理</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_16.jpg" height="41" width="41"/>
                        <p>个人中心</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_17.jpg" height="41" width="41"/>
                        <p>地址管理</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_18.jpg" height="41" width="42"/>
                        <p>站内消息</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_23.jpg" height="41" width="42"/>
                        <p>账号安全</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_24.jpg" height="41" width="41"/>
                        <p>咨询管理</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_25.jpg" height="41" width="41"/>
                        <p>站票咨询</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_26.jpg" height="41" width="42"/>
                        <p>我的发展</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_31.jpg" height="42" width="42"/>
                        <p>账户余额</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_32.jpg" height="42" width="41"/>
                        <p>设置</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_34.jpg" height="42" width="40"/>
                        <p>评价管理</p>
                    </li>
                    <li class="content1_bottom1_li">
                        <img src="../../../assets/我的_35.jpg" height="42" width="42"/>
                        <p>组件</p>
                    </li>

                </div>
            </div>
            <div class="content2">
                <div class="content1left"></div>
                <div class="content2modle">为你推荐</div>
                <div class="content1left"></div>
            </div>
            <div class="tuijianshuju">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        style="display: flex;flex-wrap: wrap;justify-content: space-between;"
                >
                    <van-cell v-for="v in lis" :key="v.goods_id" style="width: 48%;border-radius: 10px;margin: 5px 0;padding: 0">
                        <div>
                            <!--图片-->
                            <div>
                                <img :src="v.small" alt="" style="width: 100%;">
                            </div>
                            <!--信息-->
                            <div style="padding:0 5px;">
                                <!--是否自营与信息-->
                                <p style="font-weight: 500;
    vertical-align: middle;
    font-size: 15px;overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;-webkit-line-clamp: 2"><span v-if="v.self_operated == 1" style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin-right: 5px;">自营</span><span>{{v.name}}</span>
                                </p>
                                <!--价格-->
                                <p style="margin: 27px 0 5px 0;"><span style="color: rgb(250, 53, 52);
    font-size: 10px;
    font-weight: 600;">￥</span><span style="color: rgb(250, 53, 52);
    font-size: 16px;
    font-weight: 600;">{{v.price}}</span></p>
                            </div>
                        </div>
                    </van-cell>
                </van-list>
            </div>
        </div>
        <!--底部导航-->
        <van-tabbar v-model="active" active-color="#ee0a24">
            <van-tabbar-item icon="wap-home-o" @click="goHome">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o" @click="goTyp">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o" @click="goCart">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o">我的</van-tabbar-item>
        </van-tabbar>

    </section>
</template>

<script>
    import jsp from '../../../Api/Api'

    export default {
        name: "Mine",
        data() {
            return {
                active: 3,
                lis: [],
                numm: 1,
                loading: false,
                finished: false,
            }
        },
        methods: {
            onLoad() {
                jsp.mineGoods(this.numm).then(data => {
                    // console.log(data.data)
                    this.lis.push(...data.data.data)
                    this.numm++
                    // 加载状态结束
                    this.loading = false;
                    if (this.lis.length >= data.data.data_total) {
                        this.finished = true;
                    }
                }).catch(e => console.log(e))

            },
            login() {
                this.$router.push({path:'/enter'})
            },
            goHome() {
                this.$router.push('/home')
            },
            goTyp() {
                this.$router.push('/classify')
            },
            goCart() {
                this.$router.push('/cart')
            }
        },
    }
</script>

<style scoped>
    body {
        width: 100%;
        height: 100%;
    }

    li {
        list-style: none;
    }

    .root {
        width: 100%;
        height: 100%;
        background-color: #f3f4f6;
    }

    .top {
        width: 100%;
        height: 6%;
        text-align: center;
        color: white;
        display: flex;
        font-size: 1.2rem;
        justify-content: center;
        align-items: center;
        background-color: rgb(250, 53, 52);
        border: none;
        position: fixed;
        top: 0;
        z-index: 10;
    }

    .toptubiao1 {
        position: fixed;
        top: 1.2%;
        right: 2.8125rem;
        z-index: 333;
    }

    .toptubiao2 {
        position: fixed;
        top: 1.2%;
        right: 0.9375rem;
        z-index: 333;
    }

    .piaofu {
        width: 100%;
        height: 20%;
        border: none;
        background: url(../../../assets/bg2.png);
        background-size: 100% 100%;
        border-bottom-right-radius: 11px;
        border-bottom-left-radius: 11px;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 11;
    }

    .xinxi {
        display: flex;
        align-items: center;
        padding-left: 15px;
    }

    .xinxi img {
        width: 50px;
    }

    .xinxi > p {
        font-size: 15px;
        padding-left: 0.625rem;
        color: #f2f2f2;
    }

    .jifen {
        font-size: 12px;
        padding: 0.375rem 0.8125rem;
        color: white;
        border-top-left-radius: 1.375rem;
        border-bottom-left-radius: 1.375rem;
        background: -webkit-linear-gradient(left, #fa3534, #ff722e);
        background: linear-gradient(
                90deg, #fa3534 0, #ff722e);
    }

    .touxiang {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
    }

    .mingxi {
        margin: 0 11px;
        width: 100%;
        height: 20%;
        background-color: #fff;
        padding: 0.8125rem;
        border-radius: 0.3125rem;
        box-sizing: border-box;
    }

    .content {
        margin-top: 51%;
        padding: 0 0.6875rem;
        box-sizing: border-box;
        position: relative;
        height: 3.75rem;
    }

    .posimming2 {
        position: absolute;
        top: 16%;
        width: 95%;
        height: 4.6875rem;
        background-color: white;
        z-index: 111;
        margin: 0 2.5%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 0.625rem;
    }

    .ziti {
        font-size: 12px;
        color: #606266;
    }

    .content1 {
        background-color: #fff;
        border-radius: 0.3125rem;
        padding: 0.3125rem 0;
        margin-bottom: 0.6875rem;
    }

    .content1:nth-child(1) {
        margin-top: 10.5rem;
    }

    .content1_top {
        border-left: 0.25rem solid #fa3534;
        padding: 0 0.6875rem;
        margin: 0.6875rem 0;
        display: flex;
        justify-content: space-between;
    }

    .content1_top_p1 {
        font-size: 15px;
    }

    .content1_top_p2 {
        color: #909399;
        font-size: 13px;
        font-weight: 400;
        margin-right: 0.6875rem;
    }

    .content1_bottom {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 0.625rem;
        margin: 0.6875rem 0;
        flex-wrap: wrap;
    }

    .content1_bottom_li {
        text-align: center;
    }

    .content1_bottom_li > p {
        font-size: 12px;
        color: #606266;
    }

    .content1_midddle {
        margin: 0px;
        border-bottom: 1px solid rgb(228, 231, 237);
        width: 100%;
        transform: scaleY(0.5);
        border-top-color: rgb(228, 231, 237);
        border-right-color: rgb(228, 231, 237);
        border-left-color: rgb(228, 231, 237);
    }

    .content1_bottom1 {
        display: flex;
        justify-content: space-around;
        align-items: center;
        /*margin-top: 10px;*/
        margin: 0.6875rem 0;
        flex-wrap: wrap;
    }

    .content1_bottom1_li {
        text-align: center;
        width: 25%;
        margin: 0.6875rem 0;
    }

    .content1_bottom1_li > p {
        font-size: 12px;
        color: #606266;
    }

    .content1_bottom1_li > img {
        width: 30px;
        height: 30px;
        margin: 0 8px 8px 8px;
    }

    .content2 {
        height: 2.75rem;
        background-color: rgb(243, 244, 246);
        margin-bottom: 0rem;
        margin-top: 0rem;
        font-weight: 600;
        display: flex;
        justify-content: center;
    }

    .content1left {
        width: 5.125rem;
        border-color: rgb(220, 223, 230);
    }

    .content2modle {
        color: rgb(0, 0, 0);
        /*font-size: 1.1875rem;*/
    }

    .tuijianshuju {
        border-radius: 0.5rem 0.5rem 0rem 0rem;
        padding-bottom: 6.875rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .weikong {
        width: 100%;
        color: rgb(192, 196, 204);
        font-size: 0.875rem;
        text-align: center;
    }
</style>